<template>
  <!--回票登记-->
  <BasicModal :title="getTitle" :width="700" :canFullscreen="false" :centered="true" :destroyOnClose="true" @register="registerModal" @ok="handleSubmit" :bodyStyle="{ overflow: 'hidden' }">
    <a-form ref="registerForm" :model="model" :rules="validatorRules" :labelCol="{ style: { width: '100px' } }" :wrapperCol="{ span: 16 }" style="width: 100%; overflow: hidden">
      <a-row :gutter="8">
        <a-col :span="6">
          <a-form-item label="类型">
            <span class="text-red-600">{{ info.zwsflx }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="笔数">
            <span class="text-red-600">{{ info.counts }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="金额">
            <span class="text-red-600">{{ info.je }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="票差">
            <span class="text-red-600">{{ info.fpce || 0.0 }}</span>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="8">
        <a-col :span="23">
          <a-form-item label="收付单位" name="cooperatorId" :labelCol="{ style: { width: '100px' } }" :wrapperCol="{ span: 24 }">
            <Cascader placeholder="" v-model:value="coopPaths" :options="coopOptions" @change="coopSelectChange" />
            <a-input type="hidden" v-model:value="model.id" />
            <a-input type="hidden" v-model:value="model.businessId" />
            <a-input type="hidden" v-model:value="model.account_ids" />
            <a-input type="hidden" v-model:value="model.cooperatorId" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="8">
        <a-col :span="12">
          <a-form-item label="申请金额" name="sqje">
            <a-input type="text" v-model:value="model.sqje" autocomplete="off" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="归属日期">
            <a-date-picker v-model:value="model.invoiceDate" valueFormat="YYYY-MM" placeholder="" style="width: 204px" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="8">
        <a-col :span="12">
          <a-form-item label="交接人" name="lxr">
            <a-input type="text" v-model:value="model.lxr" autocomplete="off" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注">
            <a-input type="text" v-model:value="model.comments" style="width: 204px" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, computed, unref, reactive, watch, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { invoiceListSubmit, invoiceOrderSave } from '../types/invoice.api';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
  import { Cascader } from 'ant-design-vue';
  import { coopSelect } from '/@/views/full/business/business.api';
  import dayjs from 'dayjs';

  const isUpdate = ref(true);
  const $message = useMessage();

  const emit = defineEmits(['success', 'register']);

  //表单modal
  let info = reactive<any>({});
  let model = reactive<any>({});
  let coopOptions = reactive<any>([]);
  let coopPaths = reactive<any>([]);

  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    let res = await coopSelect();
    Object.assign(coopOptions, res);
    model.invoiceDate = dayjs(new Date()).format('YYYY-MM');

    let params = { ids: data.ids, type: 'back' };
    await invoiceListSubmit(params).then((res) => {
      if (res.success) {
        let result = res.result;
        Object.assign(info, result);
        const coopPath = result.path && result.path.split(',');
        const arrays = coopPath <= 0 ? [] : coopPath.filter((item) => item); //[366,381,382]//e
        Object.assign(coopPaths, arrays);
        Object.assign(model, {
          dwmc: result.dwmc,
          account_ids: result.account_ids,
          sflx: result.sflx,
          cooperatorId: result.coopId,
        });
      }
      //console.info("invoiceListSubmit", coopPaths)
    });
  });

  watch(
    () => model.sqje,
    (newVal) => {
      if (!newVal || newVal === 0) {
        return;
      }
      info.fpce = info.je - newVal;
    },
    { deep: true, immediate: true }
  );

  //标题
  const getTitle = computed(() => (!unref(isUpdate) ? '开票登记' : '开票登记'));

  const validatorRules = {
    sqje: [{ required: true, message: '不能为空!' }],
    cooperatorId: [{ required: true, message: '不能为空!' }],
    lxr: [{ required: true, message: '不能为空!' }],
  };

  //表单提交事件
  const registerForm = ref();
  async function handleSubmit() {
    await registerForm.value
      .validate()
      .then(async () => {
        try {
          //setModalProps({ confirmLoading: true });
          //提交表单
          await invoiceOrderSave(model).then((res) => {
            if (res.success) {
              $message.createMessage.success('操作成功！');
              //关闭弹窗
              closeModal();
              emit('success');
            } else {
              $message.createMessage.warning(res.message);
            }
          });
        } finally {
          //setModalProps({ confirmLoading: false });
        }
      })
      .catch((error: ValidateErrorEntity<any>) => {
        console.log('error', error);
      });
  }

  function coopSelectChange(value) {
    if (value.length == 3) {
      model.cooperatorId = value[2];
    }
  }
</script>

<style lang="less" scoped></style>
